import React, { Component } from 'react';
import './menu.css'
import { sortProduct } from '../../utils/api'

import Menu_item from '../menu/menu_item/menu_item';

export default class Menu extends Component {

    constructor(props) {
        super(props);
        this.state = {
            mainTitleList: []
        }
    }

    componentDidMount() {

        let data = {}
        sortProduct(data).then((res) => {
            console.log(res, '尾部商品分类菜单')

            this.setState(() => {
                return {
                    mainTitleList: res.data.data == '' ? [] : res.data.data.list
                }
            })
        })
    }
    goListM = () => {
        this.props.history.push('/product_list')
    }

    render() {
        return (
            <div className="footer">
                <div className="footer-menu-wrap">
                    <div className="four columns">
                        <div className="text-align--left">
                            <div className="logo-two">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>我们的生活市场</font>
                                </font>
                            </div>
                        </div>
                    </div>
                    <div className="four columns">
                        <div className="footer_menu1">
                            <div className="main_menu">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>主菜单</font>
                                </font>
                                <span className="right icon-down-arrow"></span>
                            </div>
                            <div className="toggle_content">
                                <ul>
                                {
                                    this.state.mainTitleList.map((item, index) => {
                                        return (   
                                            <li key={index}>
                                                <p>
                                                    <a onClick={this.goListM.bind(this)}>
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font style={{ verticalAlign: 'inherit' }}>{item.name}</font>
                                                        </font>
                                                    </a>
                                                </p>
                                            </li>
                                        )
                                    })
                                }
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="four columns">
                        <div className="footer_menu2">
                            <div className="main_menu">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>页脚菜单</font>
                                </font>
                                <span className="right icon-down-arrow"></span>
                            </div>
                            <div className="toggle_content">
                                <ul>
                                    <li>
                                        <p>
                                            <a href="">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>搜索</font>
                                                </font>
                                            </a>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <a href="">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>联系我们</font>
                                                </font>
                                            </a>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <a href="#">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>隐私政策</font>
                                                </font>
                                            </a>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <a href="#">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>退货与退款政策</font>
                                                </font>
                                            </a>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <a href="#">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>运送与常见问题</font>
                                                </font>
                                            </a>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <a href="#">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>服务条款</font>
                                                </font>
                                            </a>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="menu_item">
                        <Menu_item {...this.props} />
                    </div>
                    <div className="four columns">
                        <div className="footer_menu3">
                            <div className="news_section">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}>立即订阅</font>
                                </font>
                            </div>
                            <div className="newsletter-section">
                                <form action="" className="contact-form">
                                    <input type="email" className="contact-email" placeholder="输入您的电子邮件地址..." />
                                    <font style={{ verticalAlign: 'inherit' }}>
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <input type="submit" className="action_button sign_up2" value="注册" />
                                        </font>
                                    </font>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}